<template>
  <div>
    <el-form :inline="true" ref="queryForm" :model="query">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="24">
          <!-- 检索条件 start -->
          <el-form-item label="操作人" prop="operateName">
            <el-input
              v-model="query.operateName"
              placeholder="请输入操作人名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作账号" prop="operateAccount">
            <el-input
              v-model="query.operateAccount"
              placeholder="请输入操作账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="请求服务" prop="serviceName">
            <el-input
              v-model="query.serviceName"
              placeholder="请输入服务名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="请求平台" prop="operatePlatform">
            <el-select
              v-model="query.operatePlatform"
              placeholder="请选择"
              @change="querySearchForm"
            >
              <el-option label="全部" value="" />
              <el-option label="管理系统" value="0" />
              <el-option label="商城系统" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作类型" prop="operateType">
            <el-select
              v-model="query.operateType"
              placeholder="请选择"
              @change="querySearchForm"
            >
              <el-option label="全部" value="" />
              <el-option label="新增" value="0" />
              <el-option label="修改" value="1" />
              <el-option label="删除" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="响应结果" prop="hasException">
            <el-select
              v-model="query.hasException"
              placeholder="请选择"
              @change="querySearchForm"
            >
              <el-option label="全部" value="" />
              <el-option label="正常" value="0" />
              <el-option label="异常" value="1" />
            </el-select>
          </el-form-item>
          <!-- 检索条件 end -->

          <el-form-item>
            <el-button icon="el-icon-search" @click="querySearchForm"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetSearchForm"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      stripe
      border
      :data="tableData"
      style="width: 100%"
      :height="maxTableHeight"
    >
      <!-- 表格属性 start -->
      <el-table-column prop="operatePlatformName" label="请求平台" width="120">
      </el-table-column>
      <el-table-column prop="serviceName" label="请求服务" width="180">
      </el-table-column>
      <el-table-column prop="operateName" label="操作人" width="120">
      </el-table-column>
      <el-table-column prop="operateAccount" label="操作账号" width="150">
      </el-table-column>
      <el-table-column prop="operateTypeName" label="操作类型" width="90" align="center">
      </el-table-column>
      <el-table-column prop="requestIp" label="请求IP" width="120">
      </el-table-column>
      <el-table-column prop="runMilliseconds" label="请求内容" width="90" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="medium"
            icon="el-icon-document"
            @click="requestDetail(row)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="runMilliseconds" label="响应内容" width="90" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="medium"
            icon="el-icon-document"
            @click="responseDetail(row)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="requestPath" label="请求地址"> </el-table-column>
      <el-table-column prop="requestTime" label="请求时间" width="180">
      </el-table-column>
      <el-table-column prop="runMilliseconds" label="请求耗时" width="90">
        <template slot-scope="{ row }"> {{ row.runMilliseconds }} ms </template>
      </el-table-column>
      <el-table-column prop="hasException" label="是否异常" width="90" align="center">
        <template slot-scope="{ row }">
          <el-tag type="danger" v-if="row.hasException == 1">异常</el-tag>
        </template>
      </el-table-column>
      <!-- 表格属性 end -->
    </el-table>

    <!-- JSON详情窗口 -->
    <el-dialog
      title="JSON信息"
      :visible.sync="jsonData.show"
      width="50%"
      append-to-body
    >
      <JsonViewer
        :expand-depth="10"
        copyable
        boxed
        sort
        theme="my-awesome-json-theme"
        :value="jsonData.data"
      />
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from "vuex";
import listMixins from "@/views/base/listMixins";

// 请求接口 start
import sysApi from "@/api/sysApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "sysOperateLog",
  // 组件名称 start
  mixins: [listMixins],
  data() {
    return {
        maxTableHeight: `${document.documentElement.clientHeight}` - 300,
      // 数据 start
      dialogTitle: "操作日志",
      permission: {},
      query: {
        operateName: "",
        operateAccount: "",
        serviceName: "",
        operatePlatform: "",
        operateType: "",
        hasException: "",
      },
      // 数据 end
      jsonData: {
        show: false,
        data: "",
      },
    };
  },
  methods: {
    requestDetail(row) {
      this.jsonData.show = true;
      this.jsonData.data = JSON.parse(row.requestJson);
    },
    responseDetail(row) {
      this.jsonData.show = true;
      this.jsonData.data = JSON.parse(row.responseJson);
    },
    remoteTableData() {
      // 分页请求 start
      sysApi.operateLog.listPage(this.searchParams()).then((res) => {
        this.updateTableData(res.data);
      });
      // 分页请求 end
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>
<style lang="less">
.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button {
    color: #49b3ff;
  }
  .jv-node {
    margin-top: 5px;
    .jv-push {
      .jv-key {
        // color: rgba(64, 158, 255, 0.8);
        margin-right: 5px;
      }
    }
  }
  .jv-key-node {
    height: 20px;
    line-height: 20px;
  }

  .jv-item {
    &.jv-array {
      color: #111111;
    }
    &.jv-boolean {
      color: #fc1e70;
    }
    &.jv-function {
      color: #067bca;
    }
    &.jv-number {
      color: #fc1e70;
    }
    &.jv-number-float {
      color: #fc1e70;
    }
    &.jv-number-integer {
      color: #fc1e70;
    }
    &.jv-object {
      color: #111111;
    }
    &.jv-undefined {
      color: #e08331;
    }
    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      margin-right: 5px;
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}
</style>